<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- viewport的<meta>标签，这个标签可以修改在大部分的移动设备上面的显示，为了确保适当的绘制和触屏缩放。-->
    <title>新闻管理平台</title>
    <!--样式文件引用-->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>

<!--主体部分-->
<body style="margin:0">

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<!--网页内的大标题-->
<header style="background-color: #5C307D;padding: 3%;color: #eeeeee">
    <h1 align="center">新闻管理平台</h1>
</header>

<div align="center" style="margin:5%; width:100%; align-content: center">
    <table id="searchArea" style="width:50%; margin-right: 10%;">
        <tr style="width: 100%">
            <td style="width:65%">
                <input type="text" class="form-control" id="searchInput" placeholder="来，找找你想要的..." style="width:100%">
            </td>
            <td style="width:15%">
                <select id="searchSelect" class="form-control" style="width:100%">
                    <option value="0">筛选器</option>
                    <option value="ID">编号</option>
                    <option value="title">标题</option>
                    <option value="group">部门</option>
                    <option value="link">链接</option>
                </select>
            </td>
            <td style="width:20%">
                <button id="searchButton" class="btn btn-primary" style="width:100%">搜索</button>
            </td>
        </tr>
    </table>
</div>

<!--新闻条目表格（ID-标题-链接-部门-操作栏）-->
<!--暂时实现基础的逐条添加和单条删除-->
<div id="mainTable" style="width: 90%; margin-right: 5%;margin-left: 5%;margin-bottom: 5%">
    <table class="table table-striped table-hover table-bordered" align="center" id="newsTable" style="width: 100%">
        <!--首行-->
        <thead style="width: 100%">
            <tr style="width: 100%">
                <th style="padding: 0.3%; width: 10%"><h4 align="center">日期</h4></th>
                <th style="padding: 0.3%; width: 30%"><h4 align="center">新闻标题</h4></th>
                <th style="padding: 0.3%; width: 33%"><h4 align="center">新闻链接</h4></th>
                <th style="padding: 0.3%; width: 20%"><h4 align="center">发布部门</h4></th>
                <th style="padding: 0.3%; width: 7%"><h4 align="center">操作</h4></th>
            </tr>
            <!--功能栏-添加-->
            <tr style="width: 100%">
                <!--暂不支持修改日期-->
                <td id="editToolBar" style="text-align: center; padding: 1.2%"></td>
                <td align="center"><input id="newTitle" type="text" class="form-control" placeholder="输入新闻标题"
                                          style="padding:1%; text-align: center"></td>
                <td align="center"><input id="newLink" type="text" class="form-control" placeholder="输入新闻链接"
                                          style="padding:1%; text-align: center"></td>
                <td align="center"><select id="newGroup" class="form-control">
                    <option value="0">选择部门</option>
                    <option value="学生分会">学生分会</option>
                    <option value="信息中心">信息中心</option>
                    <option value="运营中心">运营中心</option>
                    <option value="宣传中心">宣传中心</option>
                    <option value="血液部">血液部</option>
                    <option value="急救部">急救部</option>
                    <option value="支教部">支教部</option>
                    <option value="同伴部">同伴部</option>
                    <option value="防艾部">防艾部</option>
                </select></td>
                <td align="center"><button id="addButton" class="add-button button btn btn-primary">添加</button></td>
            </tr>
        </thead>
        <tbody id="mainTbody">
        </tbody>
    </table>
</div>

<!--底部栏-->
<div align="center" style="background-color: #5C307D;padding: 2%;color: #eeeeee">
    <span>如有问题或者建议,请反馈到 <a href="mailto:hexw15@outlook.com" style="color: cornflowerblue">hexw15@outlook.com</a></span>
</div>


<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>


<script>
    function delFromDB(delID){//根据ID从数据库中删除数据
        $.ajax({
            url:"https://api.tsinghua-redcross.org.cn/news-links/"+delID,
            type:"delete"
        })
    }
    function selectFromDB(title, link, group, timestamp){//找到需要删除的ID
        var delID;
        $.get("https://api.tsinghua-redcross.org.cn/news-links",function(getJson){
            for(var i = 0; i < getJson.length; i++) {
                if ((getJson["" + i].title === title) && (getJson["" + i].link === link) && (getJson["" + i].group === group) && (getJson["" + i].timestamp === timestamp)) {
                    delID = getJson["" + i]._id;
                    delFromDB(delID);
                }
            }
        });
    }
    function removeTr(obj) {//内置删除按钮
        var delTimestamp = $($(obj).parents("tr")[0]).children("td")["0"].innerHTML;
        var delTitle = $($(obj).parents("tr")[0]).children("td")["1"].innerHTML;
        var delLink = $($(obj).parents("tr")[0]).children("td")["2"].innerText;
        var delGroup = $($(obj).parents("tr")[0]).children("td")["3"].innerHTML;
        selectFromDB(delTitle, delLink, delGroup, delTimestamp);
        $(obj).parents("tr")[0].remove();
    }
    function addOneNews(title, link, group, timestamp) {//在前端页面列表末尾添加一个新的条目
        var newsDetails = '<tr><td align="center" style="padding:1.5%">' + timestamp +
            '</td><td align="center" style="padding:1.5%">' + title +
            '</td><td align="center" style="padding:1.5%"><a href="' + link +
            '" target="_blank">' + link +
            '</a></td><td align="center" style="padding:1.5%">' + group +
            '</td><td align="center"><button class="delete-button button btn btn-danger"' +
            ' onclick="removeTr(this);">删除</button></td></tr>';//增加条目的同时内置删除按钮
        $("#"+"mainTbody").append(newsDetails);
    }

    function addToDB(title, link, group, timestamp){//将某个数据添加到数据库中
        $.ajax({
            url:'https://api.tsinghua-redcross.org.cn/news-links',
            data:{
                "title" : title,
                "group" : group,
                "timestamp" : timestamp,
                "link" : link
            },
            dataType:"json",
            type:"post"
        });
    }

    function getDate(){//获得格式化日期信息
        var today = new Date();
        return today.getFullYear()+"/"+(today.getMonth()+1)+"/"+today.getDate();
    }

    function clearAll(){//清空新闻列表
        $("#"+"mainTbody").html("");
    }

    function showAll(){//显示所有新闻
        $.get("https://api.tsinghua-redcross.org.cn/news-links",function(getJson){
            clearAll();
            for(var i = 0; i < getJson.length; i++){
                addOneNews(getJson[""+i].title,getJson[""+i].link,getJson[""+i].group,getJson[""+i].timestamp);
            }
        });
    }

    $("#"+"searchButton").click(function() {//搜索（暂时只支持所有新闻，今后能实现更多功能）
        showAll();
    });

    $("#"+"addButton").click(function() {//点击添加按钮，获取新闻信息并添加
        var newTitle = $("#"+"newTitle")["0"].value;
        var newLink = $("#"+"newLink")["0"].value;
        var newGroup = $("#"+"newGroup")["0"].value;
        var newTimestamp = getDate();
        //确定标题、链接、部门均非空了，再根据新的ID添加无冲突条目
        if((!newTitle)||(!newLink)||(newGroup==="0"))
            alert("错误：标题/链接为空，或尚未选择发布部门。");
        else
            addToDB(newTitle, newLink, newGroup, newTimestamp);
            addOneNews(newTitle, newLink, newGroup, newTimestamp);
    });

    //初始页面，默认显示所有条目
    $(document).ready(function(){
        //补全新闻编辑栏中的日期
        $("#"+"editToolBar")["0"].innerHTML = getDate();
        showAll();
        //按下addButton，添加新的条目
    });
</script>
</body>
</html>